<script  lang="ts" setup>
import { provide, ref } from 'vue';
import ChildOne from './components/ChildOne.vue';
import ChildTwo from './components/ChildTwo.vue';
import ChildThree from './components/ChildThree.vue';
import ChildFour from './components/ChildFour.vue';
import ChildFive from './components/ChildFive.vue';
import {useCounterStore} from './store'
const store=useCounterStore();
let one=ref()
const passValue=()=>{
  one.value.setValueByInterface(()=>{
    return 'the data is from parent by interface'
  });
}
const parentdatas=ref("先生，您好我来自父组件")
provide('parent',{parentdata:parentdatas})
const parentdata=ref("您好,我是来自父类的数据")
const changeChildCounter=()=>{
  store.increment()
}
</script>

<template>
  <child-one ref="one"></child-one>
  <child-two propsvalue="hi,i'm from parent"></child-two>
  <child-three v-model:mydata="parentdata"></child-three>
  <child-four></child-four>
  <child-five></child-five>
  <button @click="passValue">传值</button>
  <button @click="changeChildCounter">改变子view中的值</button>
</template>

<style lang="scss" scoped></style>
